// bannder轮播图

import Taro from '@tarojs/taro'
import { Swiper, Image, SwiperItem, Block } from '@tarojs/components'
import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux'
import { getDynamicBanner } from '../../../service/data'
import './mall.less'

function Bannerswiper() {
  const cardId = useSelector(state => state.card.__cardId);
  const [bannerList, setBannerList] = useState([])
  useEffect(() => {
    const b = async () => {
      if(cardId) {
        const res = await getDynamicBanner({ bannerType: 'ACTIVITY', accessCardId: cardId })
        setBannerList(res)
      }
    }
    b()

  }, [cardId])

  // 导航栏跳转到详情。两种方式，一种跳到动态页，一种跳转到活动详情页
  function handleToDetail(e) {
    const { jumpId, jumpType, cover, jumpName } = e.currentTarget.dataset.item

    if (!jumpId) return

    if (jumpType === 'DYNAMIC') {
      const queryParams = [
        `type=2`,
        `id=${jumpId}`,
        `shareImg=${encodeURIComponent(cover)}`,
        `title=${encodeURIComponent(jumpName)}`
      ]

      Taro.navigateTo({
        url: `/subs/website/pages/web-view/web-view?${queryParams.join('&')}`
      })
    }

    if (jumpType === 'ACTIVITY') {
      Taro.navigateTo({
        url: `/subs/interactive/pages/activity-detail/activity-detail?id=${jumpId}`
      })
    }
  }
  if (bannerList.length === 0) {
    return null
  }
  return (
    <Swiper
      className='dynamic-banner'
      indicatorDots
      indicatorColor='rgba(255,255,255,.3)'
      indicatorActiveColor='#ffffff'
      autoplay
    >
      {bannerList.map((item) => {
        return (
          <SwiperItem
            key={this}
            onTap={handleToDetail}
            data-item={item}
          >
            <Image
              className='dynamic-banner_image'
              mode='aspectFill'
              src={item.cover ? item.cover : ''}
            ></Image>
          </SwiperItem>
        )
      })}
    </Swiper>)
}
export { Bannerswiper }